<template>
  <div>
    <van-popup
      class="add-parts-popup task-handle-popup"
      v-bind="$attrs"
      position="right"
      :style="{ width: '100%', height: '100%' }"
      v-on="$listeners"
      get-container="body"
    >
      <van-nav-bar
        class="gm-nav-bar"
        left-text="选择部品"
        left-arrow
        @click-left="$emit('input', false)"
        @click-right="searchPopupShow = true"
      >
        <template #right>
          <van-icon name="search" size="18" color="#888" />
        </template>
      </van-nav-bar>
      <van-pull-refresh
        v-model="isLoading"
        @refresh="onRefresh"
        :disabled="noSearch"
      >
        <van-list
          v-model="loading"
          :finished="finished"
          :finished-text="finishText"
          @load="onLoad"
        >
          <van-checkbox-group v-model="result">
            <div class="card-wrap">
              <div class="gm-border-card" v-for="item in list" :key="item.Id">
                <van-cell
                  class="gm-border-card-header"
                  :title="item['仓库名称']"
                >
                  <template #icon>
                    <van-checkbox
                      class="van-cell__left-icon"
                      :name="item"
                      shape="square"
                    />
                  </template>
                  <template #right-icon>
                    <van-stepper
                      v-model="item.Number"
                      button-size="24"
                      :min="0"
                      :max="parseFloat(item['可用量']).toFixed(2)"
                    />
                  </template>
                </van-cell>
                <van-row class="text-row" gutter="20">
                  <van-col span="12">
                    仓库代码：{{ item["仓库代码"] }}
                  </van-col>
                  <van-col span="12">
                    物料代码：{{ item["物料代码"] }}
                  </van-col>
                </van-row>
                <van-row class="text-row" gutter="20">
                  <van-col span="12">
                    物料名称：{{ item["物料名称"] }}
                  </van-col>
                  <van-col span="12">
                    规格型号：{{ item["规格型号"] }}
                  </van-col>
                </van-row>
                <van-row class="text-row" gutter="20">
                  <van-col span="12"> 描述：{{ item["描述"] }} </van-col>
                  <van-col span="12">
                    可用量：{{ parseFloat(item["可用量"]).toFixed(2) }}
                  </van-col>
                </van-row>
              </div>
            </div>
          </van-checkbox-group>
        </van-list>
      </van-pull-refresh>

      <van-row class="btns-fixed-bottom" gutter="20">
        <van-col span="4">
          <van-icon
            :class="checkedAllImg()"
            style="margin-top: 13px"
            @click="handleCheckedAll()"
          />
        </van-col>
        <van-col span="10">
          <van-button type="default" block @click="handleCancel">
            取消
          </van-button>
        </van-col>
        <van-col span="10">
          <van-button type="info" block @click="handleConfirm">
            确定
          </van-button>
        </van-col>
      </van-row>
    </van-popup>

    <!-- 搜索弹窗 -->
    <van-popup
      v-model="searchPopupShow"
      class="search-popup"
      position="top"
      get-container="body"
    >
      <van-cell-group>
        <van-field
          v-model="keywords['仓库名称']"
          label="仓库名称"
          placeholder="请输入仓库名称"
          clearable
        />
        <van-field
          v-model="keywords['物料代码']"
          label="物料代码"
          placeholder="请输入物料代码"
          clearable
        />
        <van-field
          v-model="keywords['物料名称']"
          label="物料名称"
          placeholder="请输入物料名称"
          clearable
        />
        <van-field
          v-model="keywords['规格型号']"
          label="规格型号"
          placeholder="请输入规格型号"
          clearable
        />
        <van-field
          v-model="keywords['描述']"
          label="描述"
          placeholder="请输入描述"
          clearable
        />
      </van-cell-group>
      <van-button class="popup-search-btn" type="info" @click="onSearch">
        搜索
      </van-button>
    </van-popup>
  </div>
</template>

<script>
import { Pad_Repair_GetRequisition } from "../../api/index";
import { deepClone } from '../../utils';

export default {
  name: "AddPartsPopup",
  inheritAttrs: false,
  props: {
    activeData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      keywords: {
        仓库名称: "",
        物料代码: "",
        物料名称: "",
        规格型号: "",
        描述: "",
      },
      // 下拉树新loading
      isLoading: false,
      list: [],
      // 上拉加载loading
      loading: false,
      // 数据全部加载完成
      finished: true,
      //列表分页
      taskPageCtrl: {
        page: 0,
        size: 10,
        count: 0,
      },
      finishText: "在右上角输入搜索条件进行搜索",
      result: [],
      searchPopupShow: false,
    };
  },
  computed: {
    noSearch() {
      return Object.values(this.keywords).every((val) => val === "");
    },
  },
  methods: {
    onSearch() {
      this.searchPopupShow = false;
      this.onRefresh(false);
    },
    onRefresh(showText = true) {
      this.list = [];
      this.taskPageCtrl = {
        page: 0,
        size: 10,
        count: 0,
        noMore: false,
      };
      this.finished = false;
      this.onLoad();
      if (showText) {
        this.$toast("刷新成功");
      }
      this.isLoading = false;
    },
    onLoad() {
      this.finishText = "没有更多了";
      if (this.noSearch) {
        this.$toast("请至少输入一个搜索条件");
      } else {
        if (!this.finished) {
          this.taskPageCtrl.page++;

          const params = {
            RepairId: this.activeData.TaskID,
            Page: this.taskPageCtrl.page,
            Number: this.taskPageCtrl.size,
            仓库名称: this.keywords["仓库名称"],
            物料代码: this.keywords["物料代码"],
            物料名称: this.keywords["物料名称"],
            规格型号: this.keywords["规格型号"],
            描述: this.keywords["描述"],
          };
          Pad_Repair_GetRequisition(params)
            .then((res) => {
              if (res.ReturnResult === "1") {
                this.list.push(
                  ...res.ReturnData.children.map((val) => {
                    return {
                      ...val,
                      Number: 1,
                    };
                  })
                );

                // 加载状态结束
                this.loading = false;

                // 数据全部加载完成
                if (this.list.length === res.ReturnData.total) {
                  this.finished = true;
                }
              } else {
                this.$notify(res.Message);
              }
            })
            .catch((err) => {
              this.$notify(err);
            });
        }
      }
    },
    handleCancel() {
      this.$emit("input", false);
    },
    handleConfirm() {
      this.$emit("confirm", deepClone(this.result));
    },
    checkedAllImg() {
      const rLen = this.result.length;
      if (rLen === 0) {
        return "all-icon iconfont iconRectangle271Copy";
      } else if (rLen === this.list.length) {
        return "all-icon iconfont iconxuanzhong";
      } else {
        return "all-icon iconfont iconxuanzhong-bufen";
      }
    },
    handleCheckedAll() {
      const rLen = this.result.length;
      if (rLen === 0) {
        this.result = this.list.map((val) => {
          return val;
        });
      } else if (rLen === this.list.length) {
        this.result = [];
      } else {
        this.result = this.list.map((val) => {
          return val;
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.desc-label {
  font-size: 14px;
  padding: 9px 15px;
}

.card-wrap {
  padding: 0 15px;
}

.van-pull-refresh {
  flex: 1;
}

.van-cell__left-icon.van-checkbox {
  transform: scale(0.8);
}

.all-icon {
  font-size: 18px;
  &.iconRectangle271Copy {
    color: #c8c9cc;
  }

  &.iconxuanzhong {
    color: #1989fa;
  }

  &.iconxuanzhong-bufen {
    color: #1989fa;
  }
}
</style>